<template>
	<view class="trends">

		<!-- 球友圈 -->
		<view class="title" @tap="nav_to('/pages/dynamic/community')">
			<view class="title_left">
				<view class="title_name">
					聚农优品<view class="title_news" v-if="messageCount>0">{{ messageCount > 99 ? '+99' : messageCount }}
					</view>
				</view>
			</view>
			<view class="new_ad" v-if="action_list.length>0"
				@click="nav_to(`/pages/dynamic/subject?id=${action_list[0].ID}`)">#{{action_list[0].Title}}</view>

			<view class="title_right" @tap="nav_to('/pages/dynamic/dynamic_add')">
				<uni-icons type="camera" size="24" color="#835DF8"></uni-icons>
			</view>
			<view class="title_right2" @tap="nav_to('/pages/dynamic/community')">
				<uni-icons type="forward" color="#bababa" size="24"></uni-icons>
			</view>
		</view>
		<view class="circle">
			<view class="circle_box" v-for="(l,i) in ball_list" :key="i">
				<image :src="JSON.parse(l.Images)[0]" mode="aspectFill" v-if="l.IsVideo === 0 "
					@click.stop="lookimg(l.Images,0)"></image>
				<video :src="JSON.parse(l.Images)[0]"
					:poster="JSON.parse(l.Images)[0]+'?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'" mode="aspectFill" v-else
					@click.stop=""></video>
				<image class="avatar" :src="l.HeadImgUrl" mode="aspectFill"></image>
				<view class="user_name">
					{{l.Name}}
				</view>
				<view class="circle_text">
					<!-- {{l.Content}} -->
					<view class="zan" @click="zan(l.ID)" style="display: flex;margin-right: 20rpx;align-items: center;">
						<uni-icons type="heart" size="22" color="#fff" v-if="l.IsMyZAN==0"></uni-icons>
						<uni-icons type="heart-filled" size="22" color="#ef4034" v-else></uni-icons>
						<text v-if="l.CommunityZAN.length>0"
							style="font-size: 24rpx;color: bisque;">{{l.CommunityZAN.length}}</text>
					</view>
					<view class="zan" style="display: flex;align-items: center;">
						<uni-icons type="gift" size="22" color="#fff" v-if="l.IsSendGift==0"></uni-icons>
						<uni-icons type="gift-filled" size="22" color="#ef4034" v-else></uni-icons>
						<text v-if="l.TotalGiftNum>0" style="font-size: 24rpx;color: bisque;">{{l.TotalGiftNum}}</text>

					</view>

				</view>

			</view>
		</view>
		<!-- 榜单 -->
		<view class="head">
			<view class="title" @tap="nav_to('/pages/dynamic/popularity?tabInd=0')">
				<view class="title_left1">
					<view class="title_name">
						人气榜
						<!-- <view class="title_news">+3</view> -->
					</view>
					<view class="title_cont">
						人气挥友、霸气的榜单大哥
					</view>
				</view>
				<uni-icons type="forward" color="#bababa" size="24"></uni-icons>
			</view>
			<view class="head_box">
				<view v-if="expend_list.length>0" class="head_left" @click="gopopularity(0)">
					<view class="head_top">
						<image :src="pople_list[0].UserImgs" mode="aspectFill"></image>
						<view class="head_carry">
							<view class="head_one">
								1
							</view>
							<image :src="pople_list[0].UserImgs" mode="aspectFill"></image>
							<view class="carry_name">
								{{pople_list[0].Name?pople_list[0].Name:''}}
							</view>
						</view>
					</view>
					<view class="head_btm">
						<view class="btm_box">
							<image :src="pople_list[1].UserImgs" mode="aspectFill"></image>
							<view class="btm_name">
								{{pople_list[1].Name?pople_list[1].Name:''}}
							</view>
							<view class="btm_num">
								2
							</view>
						</view>
						<view class="btm_box">
							<image :src="pople_list[2].UserImgs" mode="aspectFill"></image>
							<view class="btm_name">
								{{pople_list[2].Name?pople_list[2].Name:''}}
							</view>
							<view class="btm_num" style="border: 4rpx solid #e8a867;">
								3
							</view>
						</view>
					</view>
				</view>
				<view v-if="expend_list.length>0" class=" head_left" @click="gopopularity(1)">
					<view class="head_top">
						<image :src="expend_list[0].UserImgs" mode="aspectFill"></image>
						<view class="head_carry">
							<view class="head_one">
								1
							</view>
							<image :src="expend_list[0].UserImgs" mode="aspectFill"></image>
							<view class="carry_name">
								{{expend_list[0].Name?expend_list[0].Name:''}}
							</view>
						</view>
					</view>
					<view class="head_btm">
						<view class="btm_box">
							<image :src="expend_list[1].UserImgs" mode="aspectFill"></image>
							<view class="btm_name">
								{{expend_list[1].Name?expend_list[1].Name:''}}
							</view>
							<view class="btm_num">
								2
							</view>
						</view>
						<view class="btm_box">
							<image :src="expend_list[2].UserImgs" mode="aspectFill"></image>
							<view class="btm_name">
								{{expend_list[2].Name?expend_list[2].Name:''}}
							</view>
							<view class="btm_num" style="border: 4rpx solid #e8a867;">
								3
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<!-- 活动聚会 -->
		<!-- <view class="title" @tap="nav_to('/pages/dynamic/news_activity')">
			<view class="title_left1">
				<view class="title_name">
					活动&聚会
				</view>
				<view class="title_cont">
					这些聚会正在等你报名
				</view>
			</view>
			<uni-icons type="forward" color="#bababa" size="24"></uni-icons>
		</view>
		<scroll-view class="scroll-view_H" scroll-x="true">
			<view class="gathering">
				<view class="gathering_box" v-for="(l,i) in party_list" :key="i" @tap="goparty(l.ActType,l.ID)">					
					<image :src="l.Banner" mode="aspectFill"></image>
					<view class="gathering_title">
						{{l.Title}}
					</view>
					<view class="gathering_cont">
						<image style="margin-left: 10rpx; margin-right:6rpx;" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/171031091591097.png" mode=""></image>
						
						<view class="gathering_time">{{ formatDate(l.EndDate) }}</view>
					</view>
				</view>
			</view>
		</scroll-view> -->
		<!-- 场地预订 -->
		<!-- <view class="venuebox">
			<view class="venueboxmin" @click="gotoplaalist">
				<view>
					<view class="venuetilte">合作机构</view>
					<view class="mintitle">雪遇线下合作机构</view>
				</view>
				<view class="arrowbox" >
					<u-icon name="arrow-right" size="22" color="#bababa"></u-icon>
				</view>
			</view>
		<scroll-view class="venuescoll" scroll-x="true">
			<view class="venuescollbox">
				<view class="venuescollboxmin" v-for="(l,i) in venuelist" :key="i" @tap="gotostadium(l.ID)">					
					<image class="venueimg" :src="l.ShopLogo" mode="aspectFill"></image>
					<view class="venuename">
						{{l.ShopName}}
					</view>
					<view class="authenbox">
						<image class="authenimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710574867844803.png"></image>
						<view @click.stop="gotoballadd(l.ShopName,l.ShopType)" class="venuedue">立即预订</view>
					</view>
					

				</view>
			</view>
		</scroll-view>
			
		</view> -->
		<!-- GD商城 -->
		<!-- <view class="title">
			<view class="title_left1">
				<view class="title_name">
					积分商城
				</view>
				<view class="title_cont">
					好多商品等你来换
				</view>
			</view>
			<uni-icons type="forward" color="#bababa" size="24" @tap="nav_to('/pages/mall/gd_shop')"></uni-icons>
		</view>
		<view class="cont">
			<view class="cont_box" v-for="(l,i) in shop_list" :key="i" @tap="goProduct(l.ID)">
				<image :src="l.Images" mode="aspectFill"></image>
				<view class="cont_name">
					{{l.ProductName}}
				</view>
				<view class="cont_btm">
					<view class="cont_price">
						<block v-if="l.PV>0">
							积分<text>{{l.PV>0?''+l.PV:''}}</text>兑换
						</block>
						<block v-if="l.Price>0">
							现金<text>{{l.Price>0?''+Price:''}}</text>
						</block>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 赠送礼物弹出层 -->
		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift" :key="i" @click="gift_active=i" class="list-cell"
							:class="{'list-active':i==gift_active}">
							<image class="list-icon" :src="l.Icon?l.Icon:'/static/img/icon_bbt.png'" mode="">
							</image>
							<view v-if="i!=gift_active" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>

							<view v-if="i==gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count ">
									{{ l.Num }}
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent">赠送</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				messageCount: 0, // 默认消息数量为0
				ball_list: [],
				party_list: [],
				shop_list: [],
				pople_list: [],
				expend_list: [],
				zan_id: 0,
				sel_community: '',
				gift: [], //礼物数组
				gift_active: -1, //当前选中礼物
				action_list: [],
				venuelist:[]
			};
		},
		async onLoad() {
			await this.init();
			this.getshops()
		},
		//下拉刷新
		async onRefresh() {

			await this.init();
		},
		onShow() {
			// 获取后端最新的消息数量
			this.get_AllNum().then((latestCount) => {
				// 从本地存储中获取上次记录的消息数量
				const lastCount = uni.getStorageSync('messageCount') || 0;
				console.log(lastCount, '===上次存储');
				// 计算新消息数量
				this.messageCount = latestCount - lastCount;
				console.log(this.messageCount, '==最新消息');
				// 更新本地存储，将latestCount保存为新的lastCount
				// uni.setStorageSync('messageCount', latestCount);
			});
		},
		onReady(){
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#FFFFFF',
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
		},
		methods: {
			//跳转组局
			gotoballadd(name,type) {
				let number = 0
				if(type == '模拟器'){
					number = 2
				}
				if(type=='练习场'){
					number = 1
				}
				uni.navigateTo({
					url: `/pages/ball/ball_add?title=${name}&golfType=${number}`
				});
			},
			//线下场所
			// 
			async getshops(){
            // let res = await this.$api.post('/Shops/List',{
            //     PageIndex:'1',
            //     PageSize:'5',
            //     ShopName:'',
            //     City:''
            // })
            let res = await this.$api.post('/Shops/RecommendShopList',{
            })
			this.venuelist = res.data
        },
			async getAction() {
				let res = await this.$api.post('Action/Running', {
					ActType: '每周挑战'
				});
				this.action_list = res.data || [];
			},
			//礼数数减
			gift_num_reduce(l) {
				if (l.Num >= 1) {
					l.Num--
				}
			},
			//礼物数加
			gift_num_plus(l) {
				if (l.Num >= 0) {
					l.Num++
				}
			},
			async init() {
				this.get_topcircle()
				this.get_partylist()
				this.get_shop()
				this.get_poplelist()
				this.get_expendlist()
				// 获取礼物列表
				this.GetGift();

				this.getAction();
			},
			async get_poplelist() {
				let res = await this.$api.post('/Member/AcceptGiftReports', {
					PageIndex: 1,
					PageSize: 3,
					Last_Lat: 0,
					Last_Lng: 0,
				})
				this.pople_list = res.data
			},
			async get_expendlist() {
				let res = await this.$api.post('/Member/SendGiftReports', {
					PageIndex: 1,
					PageSize: 3,
					Last_Lat: 0,
					Last_Lng: 0,
				})
				this.expend_list = res.data
			},
			async get_AllNum() {
				let res = await this.$api.post('/Community/TotalNum')
				const latestCount = res.data;
				return latestCount;
			},
			async get_topcircle() {
				let res = await this.$api.post('/Community/TopCommunity')
				this.ball_list = res.data
			},
			async get_partylist() {
				let res = await this.$api.post('/Action/List')
				this.party_list = res.data
			},
			formatDate(dateStr) {
				const date = new Date(dateStr);
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				return `${month}/${day} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
			},
			gopopularity(tabInd) {
				uni.navigateTo({
					url: `/pages/dynamic/popularity?tabInd=${tabInd}`
				});
			},
			//场地详情
			gotostadium(id){
				uni.navigateTo({
					url: `/pages/court/stadium?tabInd=${id}`
				})
			},
			//球场列表
			gotoplaalist(){
				console.log('111');
				uni.navigateTo({
					url: `/pages/court/courtlist`
				})
			},
			goparty(t,id) {
				if(t=='聚会活动'){
					uni.navigateTo({
						url: `/pages/dynamic/activity_details?id=${id}`
					});
				}
				else if(t=='每周挑战'){
					uni.navigateTo({
						url: `/pages/dynamic/subject?id=${id}`
					});
				}
				else if(t=='赛事'){
					uni.navigateTo({
						url: `/pages/match/detail?id=${id}`
					});
				}
			},
			goProduct(id) {
				uni.navigateTo({
					url: `/pages/dynamic/detail?id=${id}`
				});
			},
			lookimg(url, index) {
				let arr = JSON.parse(url);
				uni.previewImage({
					urls: arr,
					current: index,
				})
			},
			async get_shop() {
				let res = await this.$api.post('/Products/Recommend')
				console.log('推荐商品 ', res);
				this.shop_list = res.data
			},
			// 赞
			async zan(zid) {
				this.zan_id = zid;
				let res = await this.$api.post('Community/ZAN', {
					ID: zid
				});

				if (JSON.stringify(res.data) == 'true') {
					this.$pv.msg('点赞成功');

					this.ball_list.forEach((item, index) => {
						if (item.ID == zid) {
							item.IsMyZAN = 1;
							item.CommunityZAN.push({
								UserID: uni.getStorageSync('user').UserID,
								HeadImgUrl: uni.getStorageSync('user')
									.HeadImgUrl
							})
							this.ball_list.splice(index, 1, item);
						}
					})
				} else {
					this.$pv.msg(res.message);
				}
			},
			open_gift(item) {
				this.sel_community = item;
				this.$refs['gift'].open()
			},
			// 获取礼物列表
			async GetGift() {
				let res = await this.$api.post('Friend/GetGift');
				this.gift = res.data || [];
			},
			// 赠送礼物的相关逻辑
			async giftEvent() {

				// 当前选中礼物
				const l = this.gift[this.gift_active]

				const gift_s_price = l.Price;
				const gift_price = l.Price * l.Num;

				let res_gift = await this.$api.post('Friend/SendGift', {
					Price: gift_price,
					GiftID: l.ID,
					GiftName: l.Name,
					GiftQty: l.Num,
					ToUserID: this.sel_community.UserID,
					EventID: this.sel_community.ID,
					SendType: '球友圈赠送'
				});



				// id=123129&type=0&name=abc
				// 支付请求
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: gift_price,
					EventType: '赠送礼物',
					EventID: JSON.stringify(res_gift.data),
					body: l.Name,
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示赠送成功
					this.$pv.msg('礼物赠送成功');
					// 关闭礼物弹出层
					this.$refs['gift'].close()

					this.ball_list.forEach((item, index) => {
						if (item.ID == this.sel_community.ID) {
							item.IsSendGift = 1;
							item.TotalGiftNum = item.TotalGiftNum + l.Num;
							this.ball_list.splice(index, 1, item);
						}
					});


					l.Price = gift_price;
					// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
					this.$im.sendMessage(200, JSON.stringify(l), this.sel_community.UserID + '', 12).then(res => {
						console.log(JSON.stringify(l));
					});

					//将价格改回来
					l.Price = gift_s_price;

					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {

						// 关闭礼物弹出层
						_this.$refs['gift'].close();

						_this.$pv.msg('礼物赠送成功');

						_this.ball_list.forEach((item, index) => {
							if (item.ID == _this.sel_community.ID) {
								item.IsSendGift = 1;
								item.TotalGiftNum = item.TotalGiftNum + l.Num;
								_this.ball_list.splice(index, 1, item);
							}
						})

						l.Price = gift_price;
						// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
						_this.$im.sendMessage(200, JSON.stringify(l), _this.sel_community.UserID + '', 12)
							.then(res => {
								console.log(JSON.stringify(l));
							});

						//将价格改回来
						l.Price = gift_s_price;

					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},
		},
	};
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
	.head {
		.head_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;

			.head_left {
				height: 320rpx;
				width: 320rpx;
				border-radius: 16rpx;

				.head_top {
					height: 160rpx;
					border-radius: 16rpx 16rpx 0 0;

					image {
						height: 160rpx;
						width: 320rpx;
						border-radius: 16rpx 16rpx 0 0;
					}

					.head_carry {
						height: 90rpx;
						display: flex;
						align-items: center;
						position: relative;
						bottom: 130rpx;

						image {
							height: 90rpx;
							width: 90rpx;
							border-radius: 100rpx;
							opacity: 1;
							border: 4rpx solid #ffeccc;
						}

						.carry_name {
							color: white;
							margin-left: 20rpx;
							font-size: 32rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							width: 160rpx;
						}

						.head_one {
							color: #fff;
							height: 30rpx;
							width: 30rpx;
							border-radius: 100rpx;
							border: 4rpx solid #ffeccc;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #000;
							position: relative;
							top: -30rpx;
							left: 30rpx;
							font-size: 24rpx;
						}
					}
				}

				.head_btm {
					height: 160rpx;
					background-color: #e8e8e8;
					border-radius: 0 0 16rpx 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.btm_box {
						width: 48%;
						text-align: center;

						image {
							height: 70rpx;
							width: 70rpx;
							border-radius: 100rpx;
							opacity: 1;
							margin-top: 40rpx;
						}

						.btm_name {
							color: #000;
							font-size: 32rpx;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							text-align: center;
						}

						.btm_num {
							color: #fff;
							height: 25rpx;
							width: 25rpx;
							border-radius: 100rpx;
							border: 4rpx solid #cac9c8;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #000;
							position: relative;
							top: -130rpx;
							left: 35rpx;
							font-size: 20rpx;
						}
					}
				}
			}

		}
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 20rpx 20rpx 38rpx;

		.title_left {
			font-size: 32rpx;
			width: 30%;
		
			.title_name {
				line-height: 36rpx;
				font-weight: bold;
				color: #000;
				display: flex;
		
				.title_news {
					width: 60rpx;
					height: 36rpx;
					border-radius: 18rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #FD4C61;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 10rpx;
				}
		
			}
		
			.title_cont {
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}
		.title_left1 {
			font-size: 32rpx;
			width: 70%;

			.title_name {
				font-weight: bold;
				font-size: 32rpx;
				line-height: 36rpx;
				color: #333333;
				display: flex;

				.title_news {
					width: 60rpx;
					height: 36rpx;
					border-radius: 18rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #FD4C61;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: 10rpx;
				}

			}

			.title_cont {
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
			}
		}

		.new_ad {
			font-size: 32rpx;

			text-align: right;
			color: #835DF8
		}

		.title_right {
			font-size: 28rpx;
			width: 10%;

			justify-content: center;
			justify-items: center;
			position: absolute;
			right: 48rpx;
		}

		.title_right2 {
			font-size: 32rpx;
			width: 10%;
			text-align: right;
		}
	}

	.circle {
		margin: 0rpx 0rpx 38rpx 26rpx;
		height: 320rpx;
		width: 725rpx;
		display: flex;
		overflow: hidden;

		.circle_box {
			margin-left: 12rpx;
			height: 320rpx;
			width: 31%;

			image {
				height: 320rpx;
				width: 100%;
				border-radius: 20rpx;
			}

			video {
				height: 320rpx;
				width: 100%;
				border-radius: 20rpx;
			}

			.user_name {
				position: relative;
				bottom: 370rpx;
				font-size: 24rpx;
				color: white;
				left: 80rpx;
				width: 150rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.avatar {
				border: 1rpx solid #D6C6AB;
				width: 48rpx;
				height: 48rpx;
				border-radius: 100rpx;
				position: relative;
				left: 15rpx;
				top: -318rpx;
			}

			.circle_text {
				width: 214rpx;
				height: 56rpx;
				font-size: 26rpx;
				position: relative;

				top: -165rpx;
				display: flex;
				color: #fff;
				justify-content: flex-end;
			}
		}
	}

	.gathering {
		margin: 0rpx 0rpx 38rpx 26rpx;
		height: 220rpx;
		width: 725rpx;
		display: flex;

		.gathering_box {
			margin-left: 12rpx;
			height: 220rpx;
			width: 332rpx;

			image {
				height: 220rpx;
				width: 332rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
			}

			.gathering_title {
				width: 292rpx;
				height: 40rpx;
				font-size: 28rpx;
				position: relative;
				left: 18rpx;
				bottom: 95rpx;
				color: #fff;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.gathering_cont {
				position: relative;
				left: 18rpx;
				bottom: 95rpx;
				display: flex;
				align-items: center;
				line-height: 36rpx;
				width: 290rpx;

				image {
					width: 20rpx;
					height: 20rpx;
				}

				.gathering_location {
					height: 36rpx;
					width: 116rpx;
					color: #FFFFFF;
					font-size: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.gathering_time {
					height: 36rpx;
					width: 118rpx;
					color: #FFFFFF;
					font-size: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}

	.shop {
		margin: 0rpx 0rpx 38rpx 26rpx;
		width: 685rpx;
		height: auto;
		display: flex;
		flex-wrap: wrap;

		.shop_box {
			height: 460rpx;
			width: 328rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx 16rpx 0 0;
			}

			.cont_name {
				color: #10100F;
				font-size: 24rpx;
				height: 64rpx;
				width: 288rpx;
				margin: 20rpx 10rpx 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.cont_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 5rpx 20rpx 0 20rpx;

				.cont_price {
					font-size: 24rpx;
					color: #4C310C;

					text {
						color: #4C310C;
						font-size: 26rpx;
						font-family: PingFang-SC-Bold;
						white-space: nowrap;
					}
				}

				.cont_cart {
					width: 152rpx;
					height: 52rpx;
					background-image: linear-gradient(#0C0C0C, #494438);
					box-shadow: 0rpx 6rpx 8rpx 0rpx #000000 30%;
					color: #F9DDAF;
					font-size: 24rpx;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.scroll-view_H {
		height: 220rpx;
		width: auto;
		display: flex;
		overflow: auto;
		white-space: nowrap;
	}
	.venuebox{
		width: 100%;
		min-height: 310rpx;
		margin-bottom: 20rpx;
		.venueboxmin{
			min-height: 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx 0 38rpx;
			box-sizing: border-box;
			.venuetilte{
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				margin-bottom: 10rpx;
				margin-top: 20rpx;
			}
			.mintitle{
				color: #999999;
				font-size: 24rpx;
			}
			.arrowbox{
				text-align: center;
			}
		}
		.venuescoll{
			width: auto;
			min-height: 400rpx;
			display: flex;
			overflow: auto;
			white-space: nowrap;
			.venuescollbox{
				width: auto;
				display: flex;
				.venuescollboxmin{
					width: 328rpx;
					min-height: 350rpx;
					margin:20rpx 20rpx 0 20rpx;
					background-color: #fff;
					border-radius: 5rpx;
					text-align: center;
					.authenbox{
						width: 100%;
						display: flex;
						margin-bottom: 20rpx;
						padding: 0 20rpx;
						.authenimg{
							width: 98rpx;
							height: 44rpx;
							margin-right: 30rpx;
						}
					}
					.venueimg{
						width: 328rpx;
						height: 328rpx;
						vertical-align: middle;
						margin-bottom: 20rpx;
					}
					.venuename{
						text-align: left;
						color: #333333;
						font-size: 26rpx;
						width: 80%;
						white-space:nowrap;
						overflow:hidden;
						text-overflow:ellipsis;
						margin-left: 24rpx;
						margin-bottom: 20rpx;
					}
					.venuedue{
						width: 152rpx;
						height: 52rpx;
						line-height: 50rpx;
						border-radius: 40rpx;
						background: linear-gradient(90deg, #3A362D 0%, #151412 100%);
						font-size: 24rpx;
						color:#F9DDAF;
					}
				}
			}
		}
		
	}
	.cont {
		display: flex;
		flex-wrap: wrap;
		padding-left: 30rpx;

		.cont_box {
			height: 460rpx;
			width: 328rpx;
			background-color: #FFFFFF;
			border-radius: 16rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;

			image {
				height: 292rpx;
				width: 328rpx;
				border-radius: 16rpx 16rpx 0 0;
			}

			.cont_name {
				color: #10100F;
				font-size: 24rpx;
				width: 288rpx;
				margin: 20rpx 10rpx 0 20rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}

			.cont_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 10rpx 20rpx 0 20rpx;

				.cont_price {
					font-size: 24rpx;
					color: #4C310C;

					text {
						color: #ff557f;
						font-size: 36rpx;
						font-family: PingFang-SC-Bold;
						white-space: nowrap;
					}
				}

				.cont_cart {
					width: 152rpx;
					height: 52rpx;
					background-image: linear-gradient(#0C0C0C, #494438);
					box-shadow: 0rpx 6rpx 8rpx 0rpx #000000 30%;
					color: #F9DDAF;
					font-size: 24rpx;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 24rpx;
				position: absolute;
				right: 50rpx;
				top: 10rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-btn {
			margin: 0 auto;
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FD4C61;
		}
	}

	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 60rpx;

		.list-cell {
			width: 27%;
			height: 170rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 5rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;

				.count {
					color: #fff;
					line-height: 60rpx !important;

				}

				.add {

					display: flex;
					justify-content: center;
					align-items: center;

					box-sizing: border-box;
					font-size: 52rpx;
					width: 75rpx;
					color: #fff;
				}
			}

			.list-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.list-name {
				color: #333;
				font-size: 26rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>